<template>
  <div class="menu-list">
    <div class="menu-list__item">
      开发管理
      <div class="menu-list__children">
        <div class="menu-list__children__inner">
          <div class="menu-list__children__item">开发商管理</div>
          <div class="menu-list__children__item">预售备案管理</div>
        </div>
      </div>
    </div>
    <div class="menu-list__item">
      物业管理
      <div class="menu-list__children">
        <div class="menu-list__children__inner">
          <div class="menu-list__children__item" @click="gotoProperty">红色物业管理</div>
          <div class="menu-list__children__item">商业物业管理</div>
          <div class="menu-list__children__item">小区设备管理</div>
          <div class="menu-list__children__item">公共区域建设管理</div>
          <div class="menu-list__children__item">物业入场管理</div>
        </div>
      </div>
    </div>
    <div class="menu-list__item">
      市场管理
      <div class="menu-list__children">
        <div class="menu-list__children__inner">
          <div class="menu-list__children__item">房屋租赁中介管理</div>
          <!-- <div class="menu-list__children__item">房屋中介管理</div> -->
          <div class="menu-list__children__item">租赁备案管理</div>
        </div>
      </div>
    </div>
    <div class="menu-list__item">
      安全管理
      <div class="menu-list__children">
        <div class="menu-list__children__inner">
          <div class="menu-list__children__item">老旧改造管理</div>
          <div class="menu-list__children__item">危房管理</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  methods: {
    gotoProperty () {
      this.$router.push({ name: 'Property' })
    }
  }
}
</script>

<style lang="scss">
.menu-list {
  display: flex;
  pointer-events: initial;
  margin: $base * -36px auto $base * 20px auto;
  justify-content: center;
  z-index: 2;

  .menu-list__item {
    width: $base * 147px;
    height: $base * 38px;
    background: url('~@/assets/menu-item.png');
    background-size: cover;
    font-size: $base * 18px;
    line-height: $base * 38px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    position: relative;

    // &.menu-list__item--active {
    //   background: url('~@/assets/menu-item-active.png');
    // }

    &:hover {
      background: url('~@/assets/menu-item-active.png');
      .menu-list__children {
        display: block;
      }
    }

    .menu-list__children {
      z-index: 2;
      display: none;
      font-size: $base * 16px;
      width: $base * 188px;
      position: relative;
      padding-top: $base * 4px;
      left: $base * 14px;

      .menu-list__children__inner {
        background: $menu_bg;
      }

      .menu-list__children__item {
        height: $base * 44px;
        line-height: $base * 44px;
        padding-left: $base * 14px;
        box-sizing: border-box;
        text-align: left;
        background: url('~@/assets/arrow-right.png');
        background-position: $base * 167px center;
        background-repeat: no-repeat;
        background-size: $base * 10px $base * 16px;
        // background-

        &:hover {
          background-color: $menu_bg_act;
        }
      }
    }
  }
}
</style>